<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="<?php echo BAOGG_AJAX;?>ext-2.2.1/resources/css/ext-all.css" />
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="<?php echo BAOGG_AJAX;?>ext-2.2.1/adapter/ext/ext-base.js">
        </script>
        <!-- ENDLIBS -->
        <script type="text/javascript" src="<?php echo BAOGG_AJAX;?>ext-2.2.1/ext-all.js">
        </script>
        <script type="text/javascript">
            Ext.onReady(function(){
                index = 0
                //reference http://extjs.com/forum/showthread.php?t=11100
                Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
                    onRender: function(ct, position){
                        this.el = ct.createChild({
                            tag: 'iframe',
                            id: 'iframe-' + this.id,
                            frameBorder: 0,
                            src: this.url
                        });
                    }
                });
                
                function addTab(item){
                    cenbterTabPanel.add({
                        title: 'New Tab ' + (++index),
                        iconCls: 'tabs',
                        frame: true,
						 layout:'fit', 
                        items: [ new Ext.ux.IFrameComponent({ id:'test'+(index), url: '<?php echo BAOGG_BASE_URL."admin/grid";?>' }) ],
                        closable: true
                    }).show();
                }
                
                //top menu
                var topmenu = new Ext.menu.Menu({
                    id: 'mainMenu1',
                    items: [{
                        text: 'I like Ext',
                        handler: addTab
                    }, {
                        text: 'Ext for jQuery'
                    }, {
                        text: 'I donated!',
                        menu: { // <-- submenu by nested config object
                            items: [ // stick any markup in a menu
            '<b class="menu-title">Choose a Theme</b>', {
                                text: 'Aero Glass',
                                checked: true,
                                group: 'theme'
                            }]
                        }
                    }]
                });
                var topmenu2 = new Ext.menu.Menu({
                    id: 'mainMenu2',
                    items: [{
                        text: 'I like Ext'
                    
                    }, {
                        text: 'Ext for jQuery'
                    }, {
                        text: 'I donated!',
                        menu: { // <-- submenu by nested config object
                            items: [ // stick any markup in a menu
            '<b class="menu-title">Choose a Theme</b>', {
                                text: 'Aero Glass',
                                checked: true,
                                group: 'theme'
                            }]
                        }
                    }]
                });
                
                
                //center tabpanel
                var cenbterTabPanel = new Ext.TabPanel({
                
                    region: 'center',
                    activeTab: 0,
                    tabPosition: 'bottom',
                    items: [{
                        title: 'Tab 1',
                        html: 'A simple tab',
                        contentEl: 'center_panel'
                    }, {
                        title: 'Tab 2',
                        html: 'Another one'
                    }]
                });
                
                
                Ext.create('Ext.container.Viewport', {
    layout: 'border',
    renderTo: Ext.getBody(),
                    items: [{
                        region: 'north',
                        contentEl: 'north_panel',
                        //  html: '<h1 class="x-panel-header">Page Title</h1>',
                        height: 100,
                        border: false,
                        margins: '0 0 5 0',
                        bbar: [{
                            'text': 'action',
                            menu: topmenu
                        }, '-', {
                            'text': 'action2',
                            menu: topmenu2
                        }]
                    }, cenbterTabPanel, {
                        region: 'south',
                        title: 'Information',
                        collapsible: true,
                        contentEl: 'south_panel',
                        //  html: ' south panel Information goes here',
                        split: true,
                        height: 100,
                        minHeight: 100
                    }]
                });
            })
        </script>
    </head>
    <body>
        <div id="north_panel">
            menu action 
            <br/>
            menu action 
            <br/>
            menu action 
            <br/>
            menu action 
            <br/>
            menu action 
            <br/>
        </div>
        <div id="center_panel">
            cneterp anle; 
            <br/>
            cneterp anle; 
            <br/>
            cneterp anle; 
            <br/>
            cneterp anle; 
            <br/>
        </div>
        <div id="south_panel">
            south panel
        </div>
    </body>
</html>
